<template>
  <div class="wapper">
    <el-container style="100%">
      <TicketType @getTicketTypeId="getTicketTypeId"></TicketType>
      <el-main style="background:#fff;margin-left:10px">
        <div class="box">
        <div class="table-wrap">
          <div class="handle-box3">
            <el-form :inline="true" ref="form" :model="searchForm" class="demo-form-inline handle-search">
              <div class="uers-left">
                 <el-form-item label="搜索：">
                  <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-input v-model="searchForm.code" placeholder="码值"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-input v-model="searchForm.idNumber" placeholder="编号"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="projectDoorId" placeholder="选择门禁点">
                    <el-option
                      v-for="(type,i) in ProjectDoor"
                      :key="i"
                      :label="type.name"
                      :value="type.projectDoorId">
                      <div @click="getChangeDoorType(type)">{{type.name}}</div>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
              </div>
            </el-form>
          </div>
          <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            class="table"
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="名称" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="码值" align="center" width="200">
              <template slot-scope="scope">
                <span>{{scope.row.code}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="idNumber" label="编号" align="center" width="300">
              <template slot-scope="scope">
                <span>{{scope.row.idNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="door" label="门禁点" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.door}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="avatar" label="头像" align="center">
              <template slot-scope="scope">
                <div class="demo-image__preview">
                  <el-image style="width: 40px; height: 40px" :src="scope.row.avatar"></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.createDate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="删除" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></div>
          <div class="fb">
            <el-pagination
            class="pag"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
          </div>
        </div>
        </div>
        <DeleteDialog
          :delVisible="delVisible"
          @deleteData="deleteData"
          @handleCloseVisible="handleCloseVisible"
        ></DeleteDialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import EditPapersManage from "../../../components/ticketing/certificate/EditPapersManage";
import TicketType from "../../../components/ticketing/ticket/TicketType";
import DeleteDialog from "../../../components/public/DeleteConfim";

export default {
  data() {
    return {
      total: 0, //总条数
      currentPage: 1, //初始页
      pagesize: 10, // 每页的数据
      //表格高度适配
      tabheight: "",
      searchForm: {
        name: "",
        code: "",
        idNumber: "",
        projectDoorId:0,
        ticketTypeId:0,
      },
      delVisible: false,
      document_Id: "",
      dataList: [],
      multipleSelection: [],
      projectId:localStorage.getItem('project_Id'),
      projectDoorId:'',
      ProjectDoor:[]
    };
  },
  mounted() {
    // this.tabheight=(this.$refs.getheight.offsetHeight-165)
  },
  created() {
    this.getData();
    this.getProjectDoor(); 
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.searchSubmit();
    },
    getTicketTypeId(val){
      this.searchForm.ticketTypeId=val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchSubmit();
    },
    searchSubmit() {
      var search = {
        name: this.searchForm.name,
        code: this.searchForm.code,
        idNumber: this.searchForm.idNumber,
        projectId: this.projectId,
        projectDoorId: this.searchForm.projectDoorId,
        ticketTypeId:this.searchForm.ticketTypeId,
        pageIndex: this.currentPage - 1,
        pageSize: this.pagesize
      }
      this.$axios.post('/AccessRecord/Ticket/Search',search)
        .then(res =>{
          if (res.data.hasError == false) {
            this.dataList = [...res.data.data]
            this.total = res.data.total;
          }
        })
    },
    // 获取数据
    getData() {
      this.currentPage=1;
      this.searchSubmit();
    },
    handleDelete(index, row) {
      this.document_Id = row.accessRecordId;
      this.delVisible = true;
    },
    deleteData() {
      this.$axios.delete(`/AccessRecord/${this.document_Id}`)
        .then(res =>{
            this.$message.success("删除成功！");
            this.delVisible = false
            this.getData();
        })
    },
    getChangeDoorType(type){
      this.searchForm.projectDoorId = type.projectDoorId
    },
    getProjectDoor(){
      this.$axios.get('/ProjectDoor/').then(res =>{
        if (res.data.hasError == false) {
          this.ProjectDoor = [...res.data.data]
        }
      })
    },
    handleCloseVisible() {
      this.document_Id = "";
      this.delVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  components: {
    EditPapersManage,
    TicketType,
    DeleteDialog
  }
};
</script>
<style lang="scss" scope>
.pag {
  position: absolute;
  bottom: 0;
}
.box{
  height: 100%;
}
.handle-box3{
  padding-top:10px ;
}
.table-wrap{
  margin-left: 10px;
  height: 100%;
}
.el-main{
  border-radius: 5px;
  position: relative;
}
.handle-search{
  display: flex;
  justify-content: space-between;
}
</style>